<template>
<div class="add-datasource-connect-wrapper main-wrapper">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <div class="connect-type-icon">
        <i :class="comptIcon"></i>
    </div>
    <div class="text-center m-b-15">
        <RadioGroup v-model="fromExist" type="button">
            <Radio :label="1">已有连接</Radio>
            <Radio :label="0">新建连接</Radio>
        </RadioGroup>
    </div>
    <div v-if="fromExist" style="position: relative;">
        <Spin size="large" fix v-if="selectLoading"></Spin> <!-- 加载动画 -->
        <Form ref="dsConnectForm" :model="datasource" :rules="dsConnectRules" :label-width="100" label-position="left" class="connect-form" style="padding-right: 32px;">
            <FormItem label="数据库连接" prop="connectId">
                <Select v-model="datasource.connectId" filterable clearable>
                    <Option v-for="(option, optionIndex) in dsConnectList" :value="option.connectId" :key="optionIndex" :label="option.connectName">
                        <p>{{ option.connectName }}</p>
                        <p style="color:#ccc;font-size:12px;">{{ option.connectHost }}:{{ option.connectPort }} &nbsp;&nbsp; {{ option.databaseName }}</p>
                    </Option>
                </Select>
            </FormItem>
        </Form>
    </div>
    <add-connect-form v-if="!fromExist" ref="addConnectForm" :dsConnect="dsConnect" :typeNeed="false" class="connect-form" style="padding-right: 32px;"></add-connect-form>
</div>
</template>

<script>
import getData from 'getData'
import AddConnectForm from '../add-connect/add-connect-form'
export default {
    name: 'AddDatasourceConnect',

    props: {
        datasource: {
            type: Object,
            required: true
        }
    },

    components: {
        AddConnectForm
    },

    computed: {
        comptIcon() {
            return "zlstbd-icon-" + this.datasource.datasourceType
        },
    },

    data () {
        return {
            dsConnect: {
                connectType: this.datasource.datasourceType
            },
            loading: false,
            fromExist: 1,
            selectLoading: false,
            dsConnectList: [],
            dsConnectRules: {
                connectId: [{
                    required: true,
                    message: '请选择数据库连接！'
                }]
            },
            lastDsConnect: null
        }
    },

    watch: {
        fromExist(val) {
            if (val === 1) {
                this.queryDsConnectSelectList();
            }
        }
    },

    methods: {
        next() {
            this.loading = true;
            if (this.fromExist === 0) {
                this.$refs.addConnectForm.save(res => {
                    this.loading = false;
                    if (res) {
                        if (res.status == 200 && res.data.code == '000') {
                            this.datasource.connectId = res.data.data;
                            this.dsConnect.connectId = res.data.data;
                            this.$emit('next');
                        }
                    }
                });
            } else {
                this.$refs.dsConnectForm.validate(valid => {
                    this.loading = false;
                    if (valid) {
                        this.$emit('next');
                    }
                });
            }

        },
        queryDsConnectSelectList() {
            this.selectLoading = true;
            getData.post('queryDsConnectSelectList', {
                connectType: this.datasource.datasourceType
            }).then(res => {
                this.selectLoading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.dsConnectList = res.data.data;
                } else {
                    this.$Message.error('查询数据库连接列表失败，请检查网络或联系管理员！');
                    console.error(res);
                }
            });
        }
    },

    mounted () {
        this.queryDsConnectSelectList();
    }

}
</script>

<style lang="less">
.add-datasource-connect-wrapper {
    position: relative;
    width: 45vw;
    .connect-type-icon {
        width: 80px;
        height: 80px;
        border: 1px dashed #dcdee2;
        text-align: center;
        font-size: 56px;
        margin: 8px auto 24px;
    }
    .connect-form {
        max-width: 544px;
        min-width: 350px;
        margin: 0 auto;
    }
}
</style>
